// 表格工具条
<template>
<div class="table-tools-bar" :class="mode" :style='HConf'>

    <div class="control-panel">
        <div class="control-item"  v-for='(item, index) of toolsFunConf' :key='index'>
            <c-fun-block :type='item.type' :icon='item.icon' :title='item.title' :peg='index' @funAction='funAction' ></c-fun-block>
        </div>
    </div>
    
    <div class="control-container">
        <component :is="toolsContainerComponent"></component>
    </div>

</div>
</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import {pxToRem} from '@/utils/tools'

@Component({

})
export default class tableToolsBar extends Vue{
    name:string = 'tableToolsBar'

    @Prop()
    mode:string

    @Prop()
    toolsFunConf:commonInf.toolsBarItem[]
    
    @Prop()
    toolsModel:tableInf.toolsMod

    @Prop()
    toolsContainerComponent:Vue
    

    // 计算工具条高度
    get HConf ():any{
        let funBlockH = 40;
        let panelPadding = 30;
        let column = 4;
        let toolsModel = this.toolsModel;
        let h:number

        if(toolsModel === 'open'){

            h = funBlockH * Math.ceil(this.toolsFunConf.length/column) + panelPadding;
            
        }

        return {'grid-template-rows': `${pxToRem(h)}rem auto`}
    }


    commit <T>(mutationName:string, data?:T):void{
        this.$store.commit(mutationName, data);
    }
    
    // 工具函数触发事件
    funAction(peg:string | number){
        this.toolsFunConf[peg].fn()
    }

}
</script>

<style scoped lang='scss'>


.table-tools-bar{
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-rows: _rem(80px) auto;
    grid-template-areas: 'panel' 'container';

    width: _rem(198px);
    height: 100%;
    background: $block_bg_color;
    
}

.control-container,
.control-panel{
    box-sizing: border-box;
}

.control-panel{
    grid-area: 'panel';
    grid-row: 1/2;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: _rem(20px) _rem(10px) _rem(10px);
    border-bottom: _rem(2px) solid $block_bg_dark;
}


.control-container{
    overflow-y: auto;
    overflow-x: hidden;

    grid-area: 'container';
    grid-row: 2/3;
    grid-auto-flow: column;
    padding:  0  _rem(26px) _rem(40px) _rem(12px);
}



// 收缩模式
.table-tools-bar.close{
    
    width: _rem(60px);
    
    .control-panel{
        grid-row: 1/3;
        
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-bottom: 0;

    }

    

    .control-item + .control-item{
        margin-top: _rem(10px);
    }

    .control-container{
        display: none;
    }

    
}




</style>